<template>
  <div class="NotForSaleEdit">
    <div class="NotForSaleEdit-one borderbottom">
      <div class="NotForSaleEdit-title">
        <div></div>
        <div>基本信息</div>
      </div>
      <div class="NotForSaleEdit-one-content">
        <div style="display: flex; align-items: center">
          <div class="star">服装类别名称：</div>
          <el-input style="width: 300px" v-model="form.base_category" placeholder="请输入服装类别名称" size="normal"
            clearable></el-input>
        </div>
        <div style="display: flex; align-items: center">
          <div class="star">胸围/腰围：</div>
          <el-select style="width: 300px" v-model="form.type" placeholder="请选择胸围或腰围" @change="form.base_size_code = []">
            <el-option v-for="(item, index) in types" :key="index" :label="item.title" :value="item.type"></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="NotForSaleEdit-one borderbottom">
      <div class="NotForSaleEdit-title">
        <div></div>
        <div>尺码信息</div>
        <i class="el-icon-circle-plus-outline pointer" style="color: #409eff; font-size: 24px; margin-left: 10px"
          @click="onAdd"></i>
      </div>
      <div class="NotForSaleEdit-one-content">
        <el-table :data="form.base_size_code" border style="width: 100%">
          <el-table-column prop="is_base" label="基码选择" align="center">
            <template slot-scope="scope">
              <el-checkbox :true-label="1" :false-label="0" v-model="scope.row.is_base"
                @change="onBase($event, scope)"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="size_code" label="尺码" align="center">
            <template slot-scope="{ row }">{{ row.size_code.title }}</template>
          </el-table-column>
          <el-table-column prop="height_code" label="身高(cm)" align="center">
            <template slot-scope="{ row }">{{
              row.height_code.title
            }}</template>
          </el-table-column>
          <el-table-column prop="waist_code" :label="form.type == 8 ? '腰围' : '胸围'" align="center">
            <template slot-scope="{ row }">{{ row.waist_code.title }}</template>
          </el-table-column>
          <el-table-column prop="address" align="center" label="操作">
            <template slot-scope="{ row, $index }"><el-button type="text" size="default"
                @click="onEdit(row, $index)">编辑</el-button>
              <el-button type="text" size="default" style="color: red" @click="onDelete($index)">删除</el-button></template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div>
      <el-button type="primary" size="default" :loading="loading" @click="onSave" :disabled="!form.base_category || !form.type || !form.base_size_code.length
        ">保 存</el-button>
    </div>
    <el-dialog title="新建部位信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div>
        <el-form ref="formsize" :model="base_size_code_obj" :rules="rules" label-width="120px">
          <el-form-item label="尺码" class="myform-item" prop="size_code">
            <el-select style="width: 300px" v-model="base_size_code_obj.size_code" value-key="id" placeholder="请选择">
              <el-option v-for="item in sizelist" :key="item.id" :label="item.s_title" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身高(cm)" class="myform-item">
            <el-select style="width: 300px" v-model="base_size_code_obj.height_code" value-key="id" clearable
              placeholder="请选择">
              <el-option v-for="item in heightlist" :key="item.id" :label="item.s_title" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="form.type == 8 ? '腰围' : '胸围'" class="myform-item">
            <el-select style="width: 300px" v-model="base_size_code_obj.waist_code" value-key="id" clearable
              placeholder="请选择">
              <el-option v-for="item in waistlist" :key="item.id" :label="item.s_title" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm('formsize')" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  postAdminOperateLookBasecode,
  postAdminOperateSetBasecode,
} from "@/api";
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      checked: false,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      types: [
        {
          title: "腰围",
          type: "8",
        },
        {
          title: "胸围",
          type: "9",
        },
      ],
      form: {
        base_category: "",
        type: "8",
        base_size_code: [],
      },

      sizelist: [], // 尺码列表
      heightlist: [], // 身高列表
      waistlist: [], //胸围/腰围列表
      base_size_code_obj: {
        size_code: "",
        height_code: "",
        waist_code: "",
        is_base: 0,
        index: "",
      },
      rules: {
        size_code: [{ required: true, message: "请选择", trigger: "blur" }],
        height_code: [{ required: true, message: "请选择", trigger: "blur" }],
        waist_code: [{ required: true, message: "请选择", trigger: "blur" }],
      },
    };
  },
  async mounted() {
    if (this.$route.query.id) {
      this.postAdminOperateLookBasecode(this.$route.query.id);
    }
    this.sizelist = await this.onSizelist(1);
    this.heightlist = await this.onSizelist(7);
  },
  methods: {
    handleClose() {
      this.base_size_code_obj = {
        size_code: "",
        height_code: "",
        waist_code: "",
        is_base: 0,
        index: "",
      };
      this.dialogVisible = false;
    },
    onEdit(row, index) {
      let base_size_code_obj = JSON.parse(JSON.stringify(row));
      let obj = {
        size_code: {
          id: base_size_code_obj.size_code.id,
          s_title: base_size_code_obj.size_code.title,
        },
        height_code: {
          id: base_size_code_obj.height_code.id,
          s_title: base_size_code_obj.height_code.title,
        },
        waist_code: {
          id: base_size_code_obj.waist_code.id,
          s_title: base_size_code_obj.waist_code.title,
        },
        is_base: base_size_code_obj.is_base,
        index,
      };
      this.base_size_code_obj = obj;
      this.onAdd();
    },
    async postAdminOperateLookBasecode(id) {
      let { form } = this;
      try {
        let res = await postAdminOperateLookBasecode({ id });
        let data = res.data;
        form.id = id;
        form.base_category = data.base_category;
        form.type = data.type;
        form.base_size_code = data.base_size_code;
      } catch (error) { }
    },
    async onSave() {
      this.loading = true;
      let { form } = this;
      let is = form.base_size_code.some((e) => {
        return e.is_base == 1;
      });
      if (is) {
        try {
          await postAdminOperateSetBasecode(form);
          this.$message.success("保存成功");
          setTimeout(() => {
            this.$router.go(-1);
            this.loading = false;
          }, 1000);
        } catch (error) {
          this.loading = false;
        }
      } else {
        this.loading = false;
        this.$message.warning("请勾选基码");
      }
    },
    // 刪除
    onDelete(index) {
      let { form } = this;
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          form.base_size_code.splice(index, 1);
          this.form = form;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onBase(e, scope) {
      let { form } = this;
      let data = form.base_size_code.map((e, index) => {
        if (index != scope.$index) {
          e.is_base = 0;
        }
        return e;
      });
      this.tableData = data;
    },
    submitForm(formName) {
      this.loading = true;
      let { base_size_code_obj, form } = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = {
            size_code: {
              id: base_size_code_obj.size_code.id,
              title: base_size_code_obj.size_code.s_title,
            },
            height_code: {
              id: base_size_code_obj.height_code.id,
              title: base_size_code_obj.height_code.s_title,
            },
            waist_code: {
              id: base_size_code_obj.waist_code.id,
              title: base_size_code_obj.waist_code.s_title,
            },
            is_base: base_size_code_obj.is_base,
          };
          console.log(base_size_code_obj.index);
          if (typeof base_size_code_obj.index == "string") {
            console.log("obj", obj);
            form.base_size_code.push(obj);
          } else {
            form.base_size_code.splice(base_size_code_obj.index, 1, obj);
          }
          console.log(form);
          this.form = form;
          this.loading = false;
          this.handleClose();
        } else {
          console.log("error submit!!");
          this.loading = false;
          return false;
        }
      });
    },
    // 部位信息
    async onSizelist(type) {
      let obj = {
        type,
        page: 1,
        size: 1000,
      };
      return await this.GetSizeList(obj);
    },
    async onAdd() {
      let type = this.form.type;
      this.waistlist = await this.onSizelist(type);
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.borderbottom {
  border-bottom: 1px solid #efefef;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.NotForSaleEdit {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;

  .NotForSaleEdit-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 800;
    padding-bottom: 20px;

    >div:nth-child(1) {
      width: 4px;
      height: 26px;
      border-radius: 4px;
      background: #409eff;
      margin-right: 10px;
    }
  }

  .NotForSaleEdit-one {
    .NotForSaleEdit-one-content {
      >div {
        margin-bottom: 20px;

        >div:nth-child(1) {
          width: 140px;
          text-align: right;
          margin-right: 10px;
        }
      }
    }
  }

  .NotForSaleEdit-two {
    .NotForSaleEdit-two-content {
      display: flex;
      flex-wrap: wrap;

      >div {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        >div:nth-child(1) {
          width: 140px;
          text-align: right;
          margin-right: 10px;
        }

        /deep/ .el-input {
          width: 400px;
        }
      }
    }
  }
}
</style>
